<template>
	<div class="view-box">
		<view-header></view-header>
		<div class="container">
			<div id="geo" ref="geo"></div>
			<div class="left data-box">
				<view-echart-device></view-echart-device>
				<view-alert-info></view-alert-info>
				<view-alert-operation></view-alert-operation>
			</div>
			<!-- 设备信息 -->
			<div class="device-box ">
				<div class="device-hd">
					<div class="device-title">
						设备信息
					</div>
					<div class="device-state fs-12">
						<span class="in-color">在线</span> / <span>离线</span>
					</div>
				</div>
				<div class="device-info fs-12" v-for="(item,index) in deviceInfo.device" :key="index">
					<div class="device-info-item">
						<div class="info-item-title">{{deviceInfo.device ? item.type : '未知设备'}}</div>
						<div class="info-item-state"><span
								class="in-color">{{deviceInfo.device ? item.online : '0'}}</span> /
							<span>{{deviceInfo.device ? item.offline : '0'}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="address-info" v-if="hasAddressInfo">
				<div class="address-name fs-24 fw-700">
					{{hasAddressInfo.title}}
				</div>
				<div class="address-alert fs-16 fw-700">
					报警提示信息
				</div>
				<div class="address-detail fs-12">
					<div class="address-detail-item">
						<div class="address-detail-title">
							报警位置：
						</div>
						<div class="address-detail-info">
							{{hasAddressInfo.address.address ? hasAddressInfo.address.address : '未知位置'}}
						</div>
					</div>
					<div class="address-detail-item">
						<div class="address-detail-title">
							报警设备：
						</div>
						<div class="address-detail-info">
							{{hasAddressInfo.device.remark ? hasAddressInfo.device.remark : '未知设备'}}
						</div>
					</div>
					<div class="address-detail-item">
						<div class="address-detail-title">
							报警时间：
						</div>
						<div class="address-detail-info">
							{{hasAddressInfo.time ? hasAddressInfo.time : '未知时间'}}
						</div>
					</div>
				</div>
				<div class="address-btn">
					<div class="address-btn-left">
						<button>查看</button>
					</div>
					<div class="address-btn-right">
						<button>取消</button>
					</div>
				</div>
			</div>
			<div class="right data-box">
				<view-monitor></view-monitor>
				<div class="view-table-box">
					<div class="box-title">
						电动自行车入户实时信息
					</div>
					<div class="table-box">
						<table class="fs-12">
							<tr class="table-th fs-12">
								<th class="td1" style="width: 40%;">地址</th>
								<th class="td1">告警类型</th>
								<th class="td1" style="width: 30%;">处理结果</th>
							</tr>
							<vue3-seamless-scroll class="seamless-warp scroll" :list="realTimeAlert1" :step="0.3"
								style="width: 100%;">
								<template v-for="(item, index) in realTimeAlert1" :key="index">
									<tr class="table-tr">
										<td class="td2" style="width: 40%;">{{item.address.address}}</td>
										<td class="td2" v-if="item.type == 1">设备离线</td>
										<td class="td2" v-if="item.type == 2">电动车告警</td>
										<td class="td2" v-if="item.type == 3">遮挡警告</td>
										<td class="td2" v-if="item.state == 1" style="width: 30%;">未处理</td>
										<td class="td2" v-if="item.state == 2" style="width: 30%;">已处理</td>
									</tr>
								</template>
							</vue3-seamless-scroll>
						</table>
					</div>
				</div>
				<div class="view-table-box">
					<div class="box-title">
						设备遮挡、离线告警信息
					</div>
					<div class="table-box">
						<table class="fs-12">
							<tr class="table-th fs-12">
								<th class="td3" style="width: 40%;">地址</th>
								<th class="td3">告警类型</th>
								<th class="td3"  style="width: 30%;">时间</th>
							</tr>
							<vue3-seamless-scroll class="seamless-warp scroll" :list="realTimeAlert" :step="0.3"
								style="width: 100%;">
								<template v-for="(item, index) in realTimeAlert" :key="index">
									<tr class="table-tr">
										<td class="td4" style="width: 40%;">{{item.device.remark}}</td>
										<td class="td4" v-if="item.type == 1">设备离线</td>
										<td class="td4" v-if="item.type == 2">电动车告警</td>
										<td class="td4" v-if="item.type == 3">遮挡警告</td>
										<td class="td4" style="width: 30%;">{{item.time}}</td>
									</tr>
								</template>
							</vue3-seamless-scroll>
						</table>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import ViewHeader from '@/components/dataview/view-header.vue'
	import ViewEchartDevice from '@/components/dataview/view-echart-device.vue'
	import ViewAlertInfo from '@/components/dataview/view-alert-info.vue'
	import ViewAlertOperation from '@/components/dataview/view-alert-operation.vue'
	import ViewMonitor from '@/components/dataview/view-monitor.vue'

	import API from '@/api/index.js'
	import TMap from 'TMap'
	import DATE from '@/utils/date.js'
	import {
		Vue3SeamlessScroll
	} from "vue3-seamless-scroll";

	import {
		mapState
	} from "vuex";

	export default {
		name: "overview",
		components: {
			ViewHeader,
			ViewEchartDevice,
			ViewAlertInfo,
			ViewAlertOperation,
			ViewMonitor,
			Vue3SeamlessScroll
		},
		data() {
			return {
				nowDate: "", // 当前日期
				nowTime: "", // 当前时间
				nowWeek: "", // 当前星期
				dotData: [],
				hasAddressInfo: null,
				deviceInfo: {},
				realTimeAlert: [],
				alertTimer: null, // 定时器名称
				realTimeAlert1: [],
				alertTimer2: null // 定时器名称
			}
		},
		mounted() {
			this.getMapAddress();
			this.getDeviceInfo();
			this.alertTimer = setInterval(this.getRealTimeAlert, 10000)
			this.alertTimer2 = setInterval(this.getRealTimeAlert1, 10000)
			this.getRealTimeAlert();
			this.getRealTimeAlert1();
		},
		methods: {
			keyDown(e) {
				if (e.keyCode === 122) {
					e.returnValue = false;
					alert('请点击全屏按钮显示全屏')
					return false
				}
			},

			getMapAddress() {
				let self = this;
				API.allAddress().then(res => {
					res.data.data.forEach(item => {
						if (item.latitude && item.longitude) {
							self.dotData.push({
								lat: item.latitude,
								lng: item.longitude,
								address: item.address,
								address_id: item.id
							})
						}
					})
					this.initMap();
				}).catch(err => {
					console.log(err)
				})
			},

			initMap() {
				let self = this;
				self.$nextTick(function() {
					let self = this;
					let center = new TMap.LatLng(self.dotData[0].lat, self.dotData[0].lng);
					//初始化地图
					let map = new TMap.Map("geo", {
						panControl: false,
						scaleControl: false,
						zoom: 12, //设置地图缩放级别, 越高越放大
						center: center, //设置地图中心点坐标
						mapStyleId: "style2", //个性化样式
					});
					//初始化散点图并添加至map图层
					var dot = new TMap.visualization.Dot({
						faceTo: "screen", //散点固定的朝向
					}).addTo(map).setData(self.dotData); //设置数据

					// 绑定点击事件
					dot.on("click", function(evt) {
						if (evt.detail.dot) {
							API.addressRealtimeAlert(evt.detail.dot.address_id, 0).then(
								res => {
									if (res.data.data.length > 0) {
										self.hasAddressInfo = res.data.data[0];
										self.formatTime(self.hasAddressInfo.time)
										self.hasAddressInfo.time = self.formatTime(self
											.hasAddressInfo
											.time);
										self.hasAddressInfo = self.hasAddressInfo;
									} else {
										self.hasAddressInfo = null;
										alert('无报警提示信息')
									}
								})
							// self.address_info = "当前点击地址为：" + evt.detail.dot.address;
						}
					})
				})
			},

			getRealTimeAlert() {
				let self = this;
				API.addressRealtimeAlert('', 2).then(res => {
					if (res.data.data.length > 0) {
						self.realTimeAlert = res.data.data;
						self.realTimeAlert.forEach(item => {
							if (item.time) {
								item.time = self.formatTime(item.time)
							}

							if (!item.device) {
								item.device = {
									remark: '未知设备'
								}
							}

							if (!item.device.remark) {
								item.device.remark = '未知设备'
							}
						})
						setTimeout(() => {
							self.realTimeAlert = self.realTimeAlert;
						}, 3000)
					} else {
					}
				})
			},

			getRealTimeAlert1() {
				let self = this;
				API.addressRealtimeAlert('', 1).then(res => {
					if (res.data.data.length > 0) {
						self.realTimeAlert1 = res.data.data;
						self.realTimeAlert1.forEach(item => {
							if (item.time) {
								item.time = self.formatTime(item.time)
							}
							if (!item.address) {
								item.address = {
									address: '未知地址'
								}
							}

							if (!item.address.address) {
								item.address.address = '未知地址'
							}
							
							if (!item.catch) {
								item.catch = {
									image: ''
								}
							}
							
							if (!item.catch.image) {
								item.catch.image = ''
							}
						})
						setTimeout(() => {
							self.realTimeAlert1 = self.realTimeAlert1;
						}, 3000)
					} else {
					}
				})
			},

			// 设备信息
			getDeviceInfo() {
				let self = this;
				API.deviceCountData().then(res => {
					self.deviceInfo = res.data.data;
					sessionStorage.setItem("username", res.data.data.username)
				}).catch(err => {
					console.log(err)
				})
			},

			// 格式化时间
			formatTime(timestamp) {
				let self = this;
				return DATE.formatTime(timestamp, 'Y-M-D h:m:s')
			}
		},

		beforeDestroy() {
			clearInterval(this.alertTimer);
			clearInterval(this.alertTimer2);
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .seamless-warp {
		height: 164px;
		overflow: hidden;
	}
</style>
